{% extends "./inc/appbase.html" %}
{%block style%}
<style>
    .original {
        border: 1px solid #999;
        font-size: 10px !important;
        border-radius: 4px;
        line-height: 14px;
        width: 30px;
        color: #505050;
        text-align: center;
        margin-right: 5px;

        position: relative;
        padding: 0 2px;
    }
    .price {
        color: #e4393c;
        font-size: 14px;
    }
    .mui-table h4 ,.mui-media-body h4{
        font-size: 15px;
        margin: 0;
        font-weight: 300;
    }
    .mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
        top: 0px !important;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
    <a href="/center/index" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right userindex" >个人中心</a>
</header>

<div class="mui-content">

        <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item {%if status == null%}mui-active{%endif%}" href="/center/order">
                全部订单
            </a>
            <a class="mui-control-item {% if status == 0%}mui-active{%endif%}" href="/center/order/index/?status=0">
                待付款 ({{nopaid}})
            </a>
            <a class="mui-control-item {% if status == 1%}mui-active{%endif%}" href="/center/order/index/?status=1">
                待收货 ({{receipt}})
            </a>
        </div>

    <!--下拉刷新容器-->
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top:85px">
        <div class="mui-scroll">
            <div class="mui-table">
            <!--数据列表-->
            {%set n = 1%}
            {%for item in list %}
                <ul class="mui-table-view {%if n ==1 %}margin-top-0{%else%}margin-top-6{%endif%}">
                    <input type="hidden" value="{{item.id}}" name="id{{item.id}}" class="id{{item.id}}">
                    <li class="mui-table-view-cell mui-media">
                        <div class="mui-row">
                            <div class="mui-col-sm-6 mui-col-xs-5">
                                <div class="size-14">状态:{%if item.pay_status == 0 and item.delivery_status != 1 and item.status != 6 and item.status != 4%}
                                    <span class="text-warning size-14">等待付款</span>
                                    {%elif (item.pay_status == 1 or item.status ==3) and item.delivery_status != 1 and item.status != 6 and item.status != 4%}
                                    <span class="text-warning size-14">等待发货</span>
                                    {%elif item.delivery_status == 1 and item.status != 6 and item.status != 4 %}
                                    <span class="text-success size-14">等待收货</span>
                                    {%elif item.status == 6%}
                                    <span class="text-danger size-14">已作废</span>
                                    {%elif item.status == 4%}
                                    <span class="text-default size-14">已完成</span>
                                    {%endif%}
</div>
                                <div class="size-14">总价: <span class="price">¥{{item.order_amount|formatCurrency}}</span> </div>
                            </div>
                            <div class="mui-col-sm-6 mui-col-xs-7">
                                {%if item.status == 4 or item.status== 6%}
                                <a href="/center/order/delorder/?id={{item.id}}" class="mui-btn mui-btn-primary delorder" >删除订单</a>
                                {%endif%}
                                {%if item.pay_status == 0 and item.delivery_status != 1 and item.status != 6 and item.status != 4%}
                                <a class="mui-btn mui-btn-danger pay" href="/center/pay/pay?order={{item.id}}">立即付款</a>
                                {%elif (item.pay_status == 1 or item.status ==3) and item.delivery_status != 1 and item.status != 6 and item.status != 4%}
                                <a class="mui-btn mui-btn-primary" href="#">提醒发货</a>
                                {%elif item.delivery_status == 1 and item.status != 6 and item.status != 4 %}
                                <a class="mui-btn mui-btn-primary confirmreceipt" href="/center/order/confirmreceipt/?id={{item.id}}" >确认收货</a>
                                {%elif item.status == 4 or item.status == 6%}
                                <a class="mui-btn mui-btn-warning" href="#">再次购买</a>
                                {%endif%}
                                 </div>
                        </div>

                    </li>
                    {% for v in item.goods%}
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="{{v.pic}}">
                            <div class="mui-media-body">
                                <h4 class="mui-ellipsis">{{v.title}}</h4>
                                <p class="mui-ellipsis"><span class="original">x{{v.goods_nums}}</span>{%if v.type%}[{{v.type}}]{%endif%} </p>
                            </div>
                        </a>
                    </li>
                    {%endfor%}

                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            <span class="mui-badge ">{{item.create_time|moment('lll')}}</span>
                            订单详情
                        </a>
                    </li>

                </ul>
            {%set n=n+1%}
            {%endfor%}
        </div>
        </div>
    </div>
</div>
<script type="text/template" id="tpl">
    {% raw %}
    <%_.forEach(data,function(item,k){ %>
    <ul class="mui-table-view margin-top-6">
        <input type="hidden" value="<%=item.id%>" name="<%=item.id%>" class="<%=item.id%>">
        <li class="mui-table-view-cell mui-media">
            <div class="mui-row">
                <div class="mui-col-sm-6 mui-col-xs-5">
                    <div class="size-14">状态:<%if ((item.pay_status == 0) && (item.delivery_status != 1) && (item.status != 6) && (item.status != 4)){%>
                        <span class="text-warning size-14">等待付款</span>
                        <%}else if ((item.pay_status == 1 || item.status ==3) && item.delivery_status != 1 && item.status != 6 && item.status != 4){%>
                        <span class="text-warning size-14">等待发货</span>
                        <%}else if (item.delivery_status == 1 && item.status != 6 && item.status != 4) {%>
                        <span class="text-success size-14">等待收货</span>
                        <%}else if (item.status == 6){%>
                        <span class="text-danger size-14">已作废</span>
                        <%}else if (item.status == 4){%>
                        <span class="text-default size-14">已完成</span>
                        <%}%>
                    </div>
                    <div class="size-14">总价: <span class="price">¥<%=item.order_amount%></span> </div>
                </div>
                <div class="mui-col-sm-6 mui-col-xs-7">
                    <%if (item.status == 4 || item.status== 6){%>
                    <a href="/center/order/delorder/?id=<%=item.id%>" class="mui-btn mui-btn-primary delorder" >删除订单</a>
                    <%}%>
                    <%if (item.pay_status == 0 && item.delivery_status != 1 && item.status != 6 && item.status != 4){%>
                    <a class="mui-btn mui-btn-danger pay" href="/cart/pay/pay/?order=<%=item.id%>">立即付款</a>
                    <%}else if ((item.pay_status == 1 || item.status ==3) && item.delivery_status != 1 && item.status != 6 && item.status != 4){%>
                    <a class="mui-btn mui-btn-primary" href="#">提醒发货</a>
                    <%}else if (item.delivery_status == 1 && item.status != 6 && item.status != 4) {%>
                    <a class="mui-btn mui-btn-primary confirmreceipt" href="/center/order/confirmreceipt/?id=<%=item.id%>">确认收货</a>
                    <%}else if (item.status == 4 || item.status == 6){%>
                    <a class="mui-btn mui-btn-warning" href="#">再次购买</a>
                    <%}%>
                </div>
            </div>

        </li>

        <%_.forEach(item.goods,function(v,k){ %>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="<%=v.pic%>">
                <div class="mui-media-body">
                    <h4 class="mui-ellipsis"><%=v.title%></h4>
                    <p class="mui-ellipsis"><span class="original">x<%=v.goods_nums%></span><%if (v.type){%>[<%=v.type%>]<%}%> </p>
                </div>
            </a>
        </li>
        <%})%>

        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">
                <span class="mui-badge "><%=item.create_time%></span>
                订单详情
            </a>
        </li>

    </ul>
    <%})%>
    {% endraw %}
</script>
{% endblock%}

{% block script %}
<script>
    //加载模板
    var tplRender =  _.template(document.getElementById("tpl").innerHTML);
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    var tops=parseInt(sessionStorage.getItem("{{ctx.url}}_top"))||0;
    var size=parseInt(sessionStorage.getItem("{{ctx.url}}_size"))||0;
    //记录位置
    window.onscroll = function () {

        var patt1 = /\(.*?\)/;
        var srtY = document.querySelector('#pullrefresh .mui-scroll').style.transform || document.querySelector('#pullrefresh .mui-scroll').style["-webkit-transform"];
        if (srtY) {
            var Y = parseInt(srtY.match(patt1)[0].split(",")[1])
        } else {
            var Y = 0;
        }
        console.log(Y)
        var S = document.querySelector('#pullrefresh').querySelectorAll('ul.mui-table-view').length;
        console.log(Y);
        if (window.sessionStorage) {
            sessionStorage.setItem("{{ctx.url}}_top", Y);
            sessionStorage.setItem("{{ctx.url}}_size", S);
        }
    }
    //点击跳转
    var segmentedControlbtn = document.querySelectorAll("#segmentedControl a.mui-control-item");
    for(var i = 0;i<segmentedControlbtn.length;i++){
        segmentedControlbtn[i].addEventListener("tap",function () {
            var href = this.getAttribute("href");
            mui.openWindow({url: href})

        })
    }

    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function() {
            var table = document.body.querySelector('#pullrefresh .mui-table');
            var cells = document.body.querySelectorAll('.mui-table-view');
            for (var i = cells.length, len = i + 3; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(li, table.firstChild);
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1500);
    }
    var count = 0;
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {

            var table = document.body.querySelector('#pullrefresh .mui-table');
            var cells = document.body.querySelectorAll('#pullrefresh .mui-table-view');
            var count = "{{count}}";
            console.log((parseInt(count) > cells.length));

            if(parseInt(cells.length) < parseInt(count)){
                createFragment(10)
                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            }else {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            }

        }, 1000);
    }

    var createFragment = function(count, page) {
        //无限加载
        var table = document.body.querySelector('#pullrefresh .mui-table');
        var lastIndex = table.querySelectorAll('ul.mui-table-view').length;
        console.log(lastIndex);
        var pages = page || Math.ceil((lastIndex+count)/count);
        console.log(pages);
        mui.ajax("{{ctx.url}}",{
            data:{
                page:pages
            },
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(data){
                //获得服务器响应
                $('#pullrefresh .mui-table').append(tplRender(data));
            }
        });

    };

        mui.ready(function() {

            var page = Math.ceil(size/10);
            if(page>1 ){
                for (var i = 1; i < (page+1); i++) {
                    createFragment(10,(i+1))
                }
            }
            mui('#pullrefresh').pullRefresh().scrollTo(0,tops);
            //删除订单
            mui(document).on('tap','a.delorder',function(){
                var self = this;
                var btnArray = ['否', '是'];
                mui.confirm('是否删除订单？', '', btnArray, function(e) {
                    if (e.index == 1) {
                        //获取id
                        var id = self.getAttribute("href");
                        mui.get(id,function(data){
                                    if(data.errno==0){
                                        mui.toast(data.data.name);
                                        location.reload();
                                    }else {
                                        mui.toast(data.error);
                                    }
                                },'json'
                        );
                    }
                })
                return false;
            })
            //确认收货
            mui(document).on('tap','a.confirmreceipt',function(){
                var self = this;
                var btnArray = ['否', '是'];
                mui.confirm('是否确认收货？', '', btnArray, function(e) {
                    if (e.index == 1) {
                        //获取id
                        var id = self.getAttribute("href");
                        mui.get(id,function(data){
                                    if(data.errno==0){
                                        mui.toast(data.data.name);
                                        location.reload();
                                    }else {
                                        mui.toast(data.error);
                                    }
                                },'json'
                        );
                    }
                })
                return false;
            })
            //付款
            mui(document).on('tap','a.pay',function(){
                var self = this;
                var btnArray = ['否', '是'];
                mui.confirm('是否确认付款？', '', btnArray, function(e) {
                    if (e.index == 1) {
                        //获取id
                        var id = self.getAttribute("href");
                        mui.openWindow({
                            url: id,
                        });
                    }
                })
                return false;
            })
            //返回个人中心
            mui("header").on('tap','.userindex',function(){
                var id = this.getAttribute("href");
                mui.openWindow({
                    url: id,
                });
                return;
            })
        });

</script>
{% endblock %}